//这个就是一个js文件，通过node中的模块操作，向外暴露一个 配置对象
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//只要是插件都必须放在这里面

let config = {
  mode: 'none',
  entry: {
    main: path.join(__dirname, './src/main.js')    //main:可以不写的
  },
  output: {
    filename: '[name].bundle.js',    //指定输出文件的名称，[name]就是entry那里的main:
    path: path.resolve(__dirname, './dist')
   },
   stats: { children: false },//当报错：Entrypoint undefined = index.html
  // devServer:{
  //   //这是配置dev-server hot热更新 命令参数的第二种方式，相对来说会麻烦一些,,,,,,算了，还是用方法1
  //   //--open --port 3000 --contentBase src --hot
  //   open: true,//自动打开浏览器
  //   port: 3000,//设置启动时候的运行端口
  //   contentBase: 'src',//指定的托管的根目录
  //   hot: true
  // }
  plugins: [
    new HtmlWebpackPlugin({//创建一个 在内存中 的html 页面
        template: path.join(__dirname,'./src/index.html'),//指定模板文件路径
        filename: 'index.html' //设置生成的内存页面名称，实际上真的看到的是这个页面
    }),
    new CleanWebpackPlugin(),
    new VueLoaderPlugin()
  ],
  module:{
    rules:[
      {
        test: /\.css$/,
        use: ['style-loader','css-loader']    //调用的顺序是从右到左
      },
      {
        test: /\.less$/,
        use: ['style-loader','css-loader','less-loader']   //配置处理less文件
      },
      {
        test: /\.scss$/,
        use: ['style-loader','css-loader','sass-loader']   //配置处理scss文件
      },
      {
        test: /\.(jpg|png|svg|gif)$/,
        use: ['url-loader?limit=20000&name=[hash:8]-[name].[ext]']  //url-loader内置了file-loader     limit设定了图片大小，小于设置的字节的图片会被转为base64编码格式的字符串
                                                           //name=[name].[ext] 设置 文件名称不进行更改。否则文件名称会进行哈希编码（这样也是为了防止重名噢）,但是又有重名图片，也不想改文件名称就可以在文件名称前加上hash值
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['url-loader']
      },
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }

    ]
  },
  resolve:{
    alias:{
      'vue$':'vue/dist/vue.js'
    }
  }
 
}

module.exports = config